<template>
  <div class="min-h-screen flex flex-col">
    <div class="container mx-auto p-8">
      <h1 class="text-3xl font-bold text-center mb-6">微影视图片</h1>
      <a-breadcrumb class="text-center mb-6">
        <a-breadcrumb-item><a href="/" class="hover:underline">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item><router-link to="/MF" class="hover:underline">微影视图片</router-link></a-breadcrumb-item>
        <a-breadcrumb-item v-if="achievement">{{ achievement.title }}</a-breadcrumb-item>
      </a-breadcrumb>

      <div v-if="achievement" class="bg-white custom-shadow p-6 rounded-lg">
        <h1 class="text-2xl font-bold text-center mb-4">{{ achievement.title }}</h1>
        <p class="text-center text-gray-600 mb-4">时间：{{ achievement.time }}</p>
        <video v-if="achievement.videoUrl" :src="achievement.videoUrl" controls class="w-full max-w-4xl mx-auto mb-4"></video>
        <h2 class="text-xl font-semibold mb-2">内容讲解</h2>
        <p class="text-gray-700 leading-relaxed" v-html="descriptionWithLineBreaks"></p>
      </div>
    </div>
    <FooterComponent />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import FooterComponent from '../Footer.vue';
import { baseURL } from '../apis/homeAPI';

const route = useRoute();
const achievement = ref(null);

const fetchAchievement = async () => {
  const id = route.params.id;

  try {
    const response = await axios.get(baseURL + `/api/microvideo-pictures/${id}?populate=*`);
    const data = response.data.data.attributes;

    const videoUrl = data.video?.data?.attributes?.url;

    achievement.value = {
      title: data.title,
      time: data.time,
      description: data.description,
      videoUrl: videoUrl ? baseURL + `${videoUrl}` : null
    };
  } catch (error) {
    console.error('Error fetching achievement:', error);
  }
};

onMounted(() => {
  fetchAchievement();
});

// 计算属性，处理换行符
const descriptionWithLineBreaks = computed(() => {
  if (achievement.value && typeof achievement.value.description === 'string') {
    return achievement.value.description.replace(/\n/g, '<br>');
  }
  return ''; // 如果没有描述，返回空字符串
});
</script>

<style scoped>
.custom-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
